<template>
<!-- 发现 下面的综合 -->
  <div>
    <div class="box" v-for="(v, i) in newarr1" :key="i" @click="fun(i)">
      <p>
        <span>{{ v.title }}</span>
        <span>{{ v.money }}</span>
      </p>
      <p>
        <span>{{ v.staus.timer }}</span>
        <span>{{ v.staus.study }}</span>
        <span>{{ v.staus.skill1 }}</span>
        <span>{{ v.staus.gangwei1 }}</span>
        <span>{{ v.staus.skill2 }}</span>
      </p>
      <p>
        <span>{{ v.txt.txt1 }}</span>
        <span>{{ v.txt.txt2 }}</span>
        <span>{{ v.txt.txt3 }}</span>
      </p>
      <div class="info">
        <p>
          <img :src="v.info.imgurl" alt="" />
          <span>{{ v.info.people }}</span>
        </p>
        <p>
          <span>{{ v.info.dizhi }}</span>
          <van-icon name="cross" />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
    return {
      arrid:0
    }
  },
  computed:{
    newarr1(){
      return this.$store.state.arr3
    }
  },
   methods:{
    fun(index){
      this.arrid = this.$store.state.arr3[index].id
      console.log(this.arrid);
      this.$router.push({ path: '/detail',query:{ id: this.arrid, i: index }})
    }
  }
};
</script>

<style scoped>
.box {
  background: white;
  height: 1.7rem;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0.1rem;
}
.box > p {
  display: flex;
  align-items: center;
  margin: 0.10rem 0;
}
.box > p:nth-child(1) {
  justify-content: space-between;
  margin: 0.20rem 0;
}
.box > p:nth-child(1) > span:nth-child(1) {
  margin-left: 0.2rem;
}
.box > p:nth-child(1) > span:nth-child(2) {
  margin-right: 0.2rem;
  color: #39c0ba;
}

.box > p:nth-child(2) {
  justify-content: flex-start;
}
.box > p:nth-child(2) > span {
  background: #f2efef;
  padding: 0.04rem;
  color: #666;
  font-size: 0.12rem;
  margin-right: 0.06rem;
  text-align: center;
  border-radius: 0.04rem;
}
.box > p:nth-child(2) > span:nth-child(1) {
  margin-left: 0.2rem;
}
.box > p:nth-child(3) {
  justify-content: flex-start;
  font-size: 0.14rem;
}
.box > p:nth-child(3) > span {
  margin: 0 0.05rem;
}
.box > p:nth-child(3) > span:nth-child(1) {
  margin-left: 0.2rem;
}

.box > .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
  line-height: 0.30rem;
}
.box > .info > p > img {
  width: 0.30rem;
  height: 0.30rem;
  border-radius: 50%;
  /* background: orange; */
  vertical-align: middle;
  margin-right: 0.06rem;
}
.box > .info > p:nth-child(1) {
  margin-left: 0.2rem;
}
.box > .info > p:nth-child(2) {
  margin-right: 0.2rem;
}
.box > .info > p:nth-child(2) > span {
  color: #ab9f9f;
}
.box > .info > p:nth-child(2) > i {
  margin-left: 0.10rem;
}
</style>